<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>汇率查询 - 吉象出海</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #EAA82A;  /* 大象黄 - 品牌主色 */
            --secondary: #2E8B57; /* 森林绿 - 辅助色 */
            --dark: #1a2e3b;     /* 深蓝色 */
            --danger: #D0021B;   /* 警示红 */
            --text: #374151;    /* 主要文字色 */
            --light-bg: #F8F9FA; /* 浅灰背景 */
            --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        body {
            background-color: var(--light-bg);
            color: var(--text);
            max-width: 428px;
            margin: 0 auto;
            padding-bottom: 70px;
            position: relative;
        }
        
        /* 顶部品牌区域 */
        .brand-header {
            text-align: center;
            padding: 12px 0;
            background: linear-gradient(to bottom, #ffffff, #F8F9FA);
            position: relative;
            border-radius: 0;
            margin-bottom: 0;
            color: var(--primary);
        }
        
        .brand-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
            position: relative;
            display: inline-block;
        }
        
        .brand-subtitle {
            font-size: 12px;
            color: var(--text);
            letter-spacing: 2px;
            opacity: 0.8;
            margin-top: 0;
            padding: 0;
            line-height: normal;
        }
        
        /* 内容容器 */
        .container {
            padding: 0 15px;
            margin-bottom: 20px;
        }
        
        /* 场景切换栏 */
        .scenario-tabs {
            display: flex;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            margin: 15px 0;
            box-shadow: var(--card-shadow);
        }
        
        .scenario-tab {
            flex: 1;
            text-align: center;
            padding: 12px 5px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            background: var(--light-bg);
        }
        
        .scenario-tab.active {
            background: var(--primary);
            color: white;
            font-weight: 600;
        }
        
        /* 汇率计算器 */
        .calculator-container {
            background: white;
            border-radius: 12px;
            margin: 0 0 20px;
            padding: 15px;
            box-shadow: var(--card-shadow);
        }
        
        .calculator-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .calculator-title i {
            color: var(--primary);
        }
        
        .input-group {
            margin-bottom: 15px;
        }
        
        .input-label {
            font-size: 14px;
            color: var(--text);
            margin-bottom: 8px;
            display: block;
            font-weight: 500;
        }
        
        .currency-input {
            display: flex;
            align-items: center;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .currency-select {
            padding: 12px 15px;
            background: var(--light-bg);
            border: none;
            font-weight: 600;
            min-width: 90px;
        }
        
        .currency-select:focus {
            outline: none;
        }
        
        .amount-input {
            flex: 1;
            padding: 12px 15px;
            border: none;
            font-size: 16px;
            font-weight: 600;
        }
        
        .amount-input:focus {
            outline: none;
        }
        
        .result-panel {
            background: var(--secondary);
            border-radius: 12px;
            padding: 15px;
            color: white;
            margin-top: 15px;
        }
        
        .result-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            font-size: 14px;
        }
        
        .result-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .result-label {
            opacity: 0.9;
        }
        
        .result-value {
            font-weight: 700;
        }
        
        .profit-badge {
            background: var(--primary);
            color: white;
            padding: 3px 8px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 信任体系 */
        .trust-section {
            background: white;
            border-radius: 12px;
            margin: 0 0 20px;
            padding: 15px;
            box-shadow: var(--card-shadow);
        }
        
        .trust-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        
        .trust-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text);
            padding: 8px 12px;
            background: var(--light-bg);
            border-radius: 20px;
        }
        
        .guarantee-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 0;
            border-bottom: 1px solid #f1f1f1;
        }
        
        .guarantee-item:last-child {
            border-bottom: none;
        }
        
        .guarantee-icon {
            width: 36px;
            height: 36px;
            background: rgba(46, 139, 87, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
            flex-shrink: 0;
        }
        
        /* 决策辅助 */
        .decision-section {
            background: white;
            border-radius: 12px;
            margin: 0 0 20px;
            padding: 15px;
            box-shadow: var(--card-shadow);
        }
        
        .tip-card {
            background: #F0F7F4;
            border-left: 4px solid var(--secondary);
            padding: 12px;
            border-radius: 0 8px 8px 0;
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
        }
        
        .tip-icon {
            background: var(--secondary);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            font-size: 13px;
        }
        
        .comparison-table th {
            background: var(--light-bg);
            padding: 10px;
            text-align: left;
            font-weight: 600;
        }
        
        .comparison-table td {
            padding: 10px;
            border-bottom: 1px solid #f1f1f1;
        }
        
        .comparison-table tr:nth-child(even) {
            background: #fafafa;
        }
        
        .best-option {
            background: rgba(234, 168, 42, 0.1) !important;
            font-weight: 600;
            position: relative;
        }
        
        .best-option::after {
            content: "✓";
            position: absolute;
            right: 10px;
            color: var(--secondary);
            font-weight: bold;
        }
        
        /* 房产通道 */
        .property-channel {
            background: linear-gradient(135deg, #2E8B57, #3DA76A);
            border-radius: 12px;
            margin: 0 0 20px;
            padding: 15px;
            color: white;
            box-shadow: var(--card-shadow);
        }
        
        .channel-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .channel-title {
            font-size: 16px;
            font-weight: 700;
        }
        
        .benefit-list {
            margin: 12px 0;
        }
        
        .benefit-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 13px;
        }
        
        .benefit-item i {
            color: var(--primary);
            margin-top: 3px;
        }
        
        .upload-btn {
            display: block;
            width: 100%;
            background: var(--primary);
            color: white;
            text-align: center;
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            margin-top: 12px;
            font-size: 14px;
        }
        
        /* 浮动工具 */
        .floating-support {
            position: fixed;
            bottom: 80px;
            right: 15px;
            background: #00B900;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 999;
            cursor: pointer;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 185, 0, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(0, 185, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 185, 0, 0); }
        }
        
        /* 底部导航菜单 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
            padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
            z-index: 1000;
            max-width: 428px;
            margin: 0 auto;
            border-radius: 20px 20px 0 0;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 5px 10px;
            min-height: 60px;
            border-radius: 16px;
            margin: 0 5px;
            transition: all 0.2s ease;
            position: relative;
            cursor: pointer;
        }
        
        .tab-item::after {
            content: '';
            position: absolute;
            top: -15px;
            bottom: -15px;
            left: 0;
            right: 0;
        }
        
        .tab-icon {
            font-size: 1.4rem;
            margin-bottom: 4px;
            transition: all 0.2s ease;
        }
        
        .tab-label {
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .tab-item.active {
            background: rgba(234, 168, 42, 0.15);
        }
        
        .tab-item.active .tab-icon {
            color: var(--primary);
            transform: scale(1.1);
        }
        
        .tab-item.active .tab-label {
            color: var(--primary);
            font-weight: 600;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 12px;
        }
        
        .section-title::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 18px;
            background: var(--primary);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 2px;
        }
        
        .rate-display {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .rate-value {
            font-size: 24px;
            font-weight: 800;
            color: var(--primary);
        }
        
        .rate-label {
            background: #FFECB3;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .time-filter {
            display: flex;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .time-btn {
            padding: 6px 12px;
            background: var(--light-bg);
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
        }
        
        .time-btn.active {
            background: var(--primary);
            color: white;
        }
        
        .chart-container {
            height: 120px;
            background: #f9f9f9;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            margin-bottom: 15px;
        }
        
        .chart-point {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--secondary);
            transform: translate(-50%, 50%);
        }
        
        .chart-point.high {
            background: var(--primary);
        }
        
        .chart-point.low {
            background: var(--danger);
        }
        
        .chart-labels {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: #6B7280;
        }
        
        /* 大象品牌元素装饰 */
        .elephant-decoration {
            position: absolute;
            top: 15px;
            left: 20px;
            opacity: 0.15;
            font-size: 32px;
            transform: rotate(-15deg);
            z-index: 0;
            color: var(--primary);
        }
		  /* 新增或修改的样式 */
        .brand-header {
            text-align: center;
            padding: 12px 0;
            background: linear-gradient(to bottom, #ffffff, #F8F9FA);
            position: relative;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .brand-content {
            flex: 1;
            text-align: center;
        }

        .back-btn {
            position: absolute;
            left: 15px;
            font-size: 20px;
            color: var(--primary);
            cursor: pointer;
            z-index: 1;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- 顶部品牌区域 - 与home.html一致 -->
  <header class="brand-header">
        <div class="back-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </div>
        <div class="brand-content">
            <div class="brand-title">吉象出海</div>
            <div class="brand-subtitle">泰国专业房地产服务平台</div>
        </div>
    </header>

    <!-- 页面内容保持不变 -->

    <script>
        // 返回按钮功能
        document.getElementById('backBtn').addEventListener('click', function() {
            window.location.href = 'home.html';
        });

      

        // 其他JavaScript代码保持不变
    </script>
    <div class="container">
        <!-- 场景切换栏 -->
        <div class="scenario-tabs">
            <div class="scenario-tab active">购房汇款</div>
            <div class="scenario-tab">生活缴费</div>
            <div class="scenario-tab">投资转账</div>
        </div>
        
        <!-- 汇率显示 -->
        <div class="calculator-container">
            <div class="rate-display">
                <div class="rate-value">1 CNY = 4.58 THB</div>
                <div class="rate-label"><i class="fas fa-fire"></i> 实时最优</div>
            </div>
            
            <div class="time-filter">
                <div class="time-btn active">24小时</div>
                <div class="time-btn">7天</div>
                <div class="time-btn">30天</div>
            </div>
            
            <div class="chart-container">
                <!-- 图表关键点 -->
                <div class="chart-point" style="left: 10%; bottom: 30%"></div>
                <div class="chart-point low" style="left: 30%; bottom: 25%"></div>
                <div class="chart-point high" style="left: 50%; bottom: 40%"></div>
                <div class="chart-point" style="left: 70%; bottom: 35%"></div>
                <div class="chart-point" style="left: 90%; bottom: 38%"></div>
                
                <!-- 连接线 -->
                <div class="chart-line" style="position: absolute; height: 2px; background: var(--secondary); width: 20%; left: 10%; bottom: 30%; transform: rotate(5deg);"></div>
                <div class="chart-line" style="position: absolute; height: 2px; background: var(--secondary); width: 20%; left: 30%; bottom: 25%; transform: rotate(15deg);"></div>
                <div class="chart-line" style="position: absolute; height: 2px; background: var(--secondary); width: 20%; left: 50%; bottom: 40%; transform: rotate(-10deg);"></div>
                <div class="chart-line" style="position: absolute; height: 2px; background: var(--secondary); width: 20%; left: 70%; bottom: 35%; transform: rotate(5deg);"></div>
            </div>
            
            <div class="chart-labels">
                <div>最低: 4.52</div>
                <div>当前: 4.58</div>
                <div>最高: 4.60</div>
            </div>
        </div>
        
        <!-- 汇款计算器 -->
        <div class="calculator-container">
            <div class="calculator-title">
                <i class="fas fa-calculator"></i> 购房汇款计算器
            </div>
            
            <div class="input-group">
                <label class="input-label">输入金额</label>
                <div class="currency-input">
                    <select class="currency-select">
                        <option>CNY</option>
                        <option>USD</option>
                        <option>EUR</option>
                    </select>
                    <input type="number" class="amount-input" placeholder="输入金额" value="200000">
                </div>
            </div>
            
            <div class="result-panel">
                <div class="result-item">
                    <span class="result-label">到账泰铢</span>
                    <span class="result-value">916,000 THB</span>
                </div>
                <div class="result-item">
                    <span class="result-label">手续费</span>
                    <span class="result-value">1,832 THB (0.2%)</span>
                </div>
                <div class="result-item">
                    <span class="result-label">到账时间</span>
                    <span class="result-value">&lt; 24小时</span>
                </div>
                <div class="result-item">
                    <span class="result-label">比昨日多收</span>
                    <span class="result-value">
                        8,240 THB 
                        <span class="profit-badge"><i class="fas fa-arrow-up"></i> 1.8%</span>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 决策辅助 -->
        <div class="decision-section">
            <div class="section-title">智能换汇提示</div>
            
            <div class="tip-card">
                <div class="tip-icon"><i class="fas fa-lightbulb"></i></div>
                <div>
                    <div style="font-weight: 700; margin-bottom: 5px;">最佳换汇时机</div>
                    <div>根据历史数据分析，每周三上午10点是换汇最佳时机，平均比日常汇率高0.8%</div>
                </div>
            </div>
            
            <div class="section-title">跨境汇款渠道对比</div>
            
            <table class="comparison-table">
                <thead>
                    <tr>
                        <th>渠道</th>
                        <th>汇率</th>
                        <th>手续费</th>
                        <th>到账时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="best-option">
                        <td>本平台</td>
                        <td>4.58</td>
                        <td>0.2%</td>
                        <td>&lt;24h</td>
                    </tr>
                    <tr>
                        <td>银行柜台</td>
                        <td>4.52</td>
                        <td>0.6%</td>
                        <td>3-5天</td>
                    </tr>
                    <tr>
                        <td>支付宝</td>
                        <td>4.56</td>
                        <td>0.3%</td>
                        <td>48h</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 信任体系 -->
        <div class="trust-section">
            <div class="section-title">安全与保障</div>
            
            <div class="trust-badges">
                <div class="trust-badge"><i class="fas fa-shield-alt"></i> 资金受泰国央行监管</div>
                <div class="trust-badge"><i class="fas fa-file-certificate"></i> 外汇牌照：BOT-SFE-2023</div>
            </div>
            
            <div style="margin-top: 15px;">
                <div class="guarantee-item">
                    <div class="guarantee-icon"><i class="fas fa-lock"></i></div>
                    <div>
                        <div style="font-weight: 700;">汇率锁定保障</div>
                        <div style="font-size: 13px; color: #6B7280;">提交后2小时内汇率不变</div>
                    </div>
                </div>
                <div class="guarantee-item">
                    <div class="guarantee-icon"><i class="fas fa-clock"></i></div>
                    <div>
                        <div style="font-weight: 700;">超时赔付</div>
                        <div style="font-size: 13px; color: #6B7280;">每晚1小时赔0.1%</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 房产通道 -->
        <div class="property-channel">
            <div class="channel-header">
                <i class="fas fa-home" style="font-size: 20px;"></i>
                <div class="channel-title">房产客户专享</div>
            </div>
            
            <div class="benefit-list">
                <div class="benefit-item">
                    <i class="fas fa-check-circle"></i>
                    <div>购房汇款手续费低至0.1%（需验证购房合同）</div>
                </div>
                <div class="benefit-item">
                    <i class="fas fa-check-circle"></i>
                    <div>大额汇款优先处理（>50万CNY）</div>
                </div>
                <div class="benefit-item">
                    <i class="fas fa-check-circle"></i>
                    <div>专属客户经理一对一服务</div>
                </div>
            </div>
            
            <a href="#" class="upload-btn">
                <i class="fas fa-upload"></i> 上传购房文件
            </a>
        </div>
    </div>
    
    <!-- LINE客服悬浮窗 -->
    <div class="floating-support">
        <i class="fab fa-line"></i>
    </div>
    
    <!-- 底部导航菜单 -->
    <div class="tab-bar">
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-home"></i></div>
            <div class="tab-label">首页</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-comment-dots"></i></div>
            <div class="tab-label">消息</div>
        </div>
        <div class="tab-item active">
            <div class="tab-icon"><i class="fas fa-exchange-alt"></i></div>
            <div class="tab-label">发布</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-handshake"></i></div>
            <div class="tab-label">委托</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">我的</div>
        </div>
    </div>
    
    <script>
        // 底部导航交互
        document.querySelectorAll('.tab-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.tab-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                
                // 根据点击的标签跳转到相应页面
                const label = this.querySelector('.tab-label').textContent;
                if (label === '首页') {
                    window.location.href = 'home.html';
                } else if (label === '汇率') {
                    window.location.href = 'exchange.html';
                } else {
                    alert(`跳转到${label}页面`);
                }
            });
        });
        
        // 场景切换功能
        document.querySelectorAll('.scenario-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.scenario-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 时间筛选功能
        document.querySelectorAll('.time-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 金额输入实时计算
        const amountInput = document.querySelector('.amount-input');
        amountInput.addEventListener('input', function() {
            const amount = parseFloat(this.value) || 0;
            const thbAmount = amount * 4.58;
            const fee = thbAmount * 0.002;
            const netAmount = thbAmount - fee;
            
            document.querySelector('.result-value:nth-child(1)').textContent = netAmount.toLocaleString('en-US') + ' THB';
            document.querySelector('.result-value:nth-child(2)').textContent = fee.toLocaleString('en-US', {maximumFractionDigits: 0}) + ' THB (0.2%)';
            
            // 计算比昨日多收
            const yesterdayRate = 4.50;
            const yesterdayAmount = amount * yesterdayRate;
            const difference = netAmount - yesterdayAmount;
            document.querySelector('.result-value:nth-child(4)').innerHTML = 
                difference.toLocaleString('en-US', {maximumFractionDigits: 0}) + ' THB ' + 
                '<span class="profit-badge"><i class="fas fa-arrow-up"></i> ' + 
                ((difference / yesterdayAmount) * 100).toFixed(1) + '%</span>';
        });
        
        // 客服按钮点击
        document.querySelector('.floating-support').addEventListener('click', function() {
            alert('正在为您连接客服');
        });
		 // 返回按钮功能
        document.getElementById('backBtn').addEventListener('click', function() {
            window.location.href = 'home.html';
        });

        // 修改后的底部导航交互
        document.querySelectorAll('.tab-bar .tab-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.tab-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                
                // 根据点击的标签跳转到相应页面
                const label = this.querySelector('.tab-label').textContent;
                switch(label) {
                    case '首页':
                        window.location.href = 'home.html';
                        break;
                    case '消息':
                        window.location.href = 'message.html';
                        break;
                    case '发布':
                        window.location.href = 'postlist.html';
                        break;
                    case '委托':
                        window.location.href = 'entrust.html';
                        break;
                    case '我的':
                        window.location.href = 'profile.html';
                        break;
                    default:
                        // 不做跳转
                        break;
                }
            });
        });

        // 场景切换功能
        document.querySelectorAll('.scenario-tabs .scenario-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.scenario-tabs .scenario-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 获取当前选中的场景类型
                const scenario = this.textContent.trim();
                
                // 根据场景类型更新页面内容
                updateScenarioContent(scenario);
            });
        });

        // 更新场景内容的函数
        function updateScenarioContent(scenario) {
            // 这里添加根据场景更新页面内容的逻辑
            console.log('切换到场景:', scenario);
            
            // 示例：更新汇率计算器的标题
            const calculatorTitle = document.querySelector('.calculator-title');
            if (scenario === '购房汇款') {
                calculatorTitle.innerHTML = '<i class="fas fa-calculator"></i> 购房汇款计算器';
            } else if (scenario === '生活缴费') {
                calculatorTitle.innerHTML = '<i class="fas fa-calculator"></i> 生活缴费计算器';
            } else if (scenario === '投资转账') {
                calculatorTitle.innerHTML = '<i class="fas fa-calculator"></i> 投资转账计算器';
            }
            
            // 可以根据实际需求更新更多内容...
        }

    </script>
</body>
</html>